<template>
  <el-container :style="{ height: containerHeight + 'px' }">
    <el-aside
      width="200px"
      style="
        padding: 10px 0px 0px 0px;
        background: #fff;
        border-right: 1px solid #dfe6ec;
      ">
      <left-tree-vue @treeClick="treeClick"></left-tree-vue>
    </el-aside>
    <el-main>
      <el-form
        :model="searchParm"
        ref="searchform"
        label-width="80px"
        :inline="true"
        size="small">
        <el-form-item label="用户名">
          <el-input v-model="searchParm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" icon="el-icon-search">查询</el-button>
          <el-button @click="reset" icon="el-icon-delete">重置</el-button>
          <el-button
            v-if="hasPerm('sys:user:add')"
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="addUser">
            新增
          </el-button>
        </el-form-item>
      </el-form>

      <el-table :height="tableHeight" :data="userTableData" border stripe>
        <el-table-column prop="loginName" label="用户名"></el-table-column>
        <el-table-column prop="deptName" label="所属部门"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column align="center" width="310" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="hasPerm('sys:user:edit')"
              icon="el-icon-edit"
              type="primary"
              size="small"
              @click="editUser(scope.row)">
              编辑
            </el-button>
            <el-button
              v-if="hasPerm('sys:user:assign')"
              icon="el-icon-setting"
              type="primary"
              size="small"
              @click="assignRole(scope.row)">
              分配角色
            </el-button>
            <el-button
              v-if="hasPerm('sys:user:delete')"
              icon="el-icon-delete"
              type="danger"
              size="small"
              @click="deleteUser(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :size.sync="parms.pageSize"
        :page.sync="parms.currentPage"
        :page-sizes="[10, 20, 40, 80, 100]"
        :total="total"
        :callback="getUserList"></Pagination>
    </el-main>
    <!-- 新增或者编辑的对话框 -->
    <addEditDiaogVue ref="addEditRef" @onConfirm="onConfirm"></addEditDiaogVue>
    <!-- 分配角色弹框 -->
    <assign-vue ref="assignRef"></assign-vue>
  </el-container>
</template>

<script>
import {
  getUserListApi,
  addUserApi,
  editUserApi,
  deleteUserApi
} from '@/api/user'
import addEditDiaogVue from './addEditDiaog.vue'
import assignVue from './assign.vue'
import Pagination from '@/components/Pagination'
import leftTreeVue from './leftTree.vue'
export default {
  //注册组件
  components: {
    Pagination,
    addEditDiaogVue,
    assignVue,
    leftTreeVue
  },
  data() {
    return {
      //用户表格高度
      tableHeight: 0,
      //用户表格数据域
      userTableData: [],
      //分页参数
      total: 0,
      //搜索框数据域
      searchParm: {
        name: ''
      },
      parms: {
        deptId: '',
        currentPage: 1,
        pageSize: 10
      },
      //container的高度
      containerHeight: 0
    }
  },

  mounted() {
    this.$nextTick(() => {
      // el-main 标签的高度
      this.containerHeight = window.innerHeight - 85
      // 表格的高度
      this.tableHeight = window.innerHeight - 220
    })
  },
  created() {},
  methods: {
    // 点击新增用户
    addUser() {
      // console.log('点击了新增按钮')
      this.$refs.addEditRef.show('0')
    },
    //编辑按钮
    editUser(row) {
      this.$refs.addEditRef.show('1', row)
    },
    // 新增或编辑确认事件
    async onConfirm(val) {
      let res = null
      if (val.editType === '0') {
        // 新增
        res = await addUserApi(val)
      } else {
        // 编辑
        res = await editUserApi(val)
      }
      if (res && res.code === 200) {
        this.$message.success(res.msg)
        //刷新用户列表
        this.getUserList()
      }
    },
    //删除按钮
    async deleteUser(row) {
      let parm = {
        userId: row.id
      }
      let confirm = await this.$myconfirm('确定删除该数据吗？')
      if (confirm) {
        let res = await deleteUserApi(parm)
        if (res && res.code === 200) {
          this.$message.success(res.msg)
          //刷新列表数据
          this.getUserList()
        }
      }
    },
    //分配角色按钮
    async assignRole(row) {
      this.$refs.assignRef.show(row)
    },
    // 获取用户列表
    async getUserList() {
      console.log('查看请求参数', this.parms)
      let res = await getUserListApi(this.parms)
      // console.log(res.data.records)
      if (res && res.code === 200) {
        this.userTableData = res.data.records
        this.total = res.data.total
      }
    },
    // 查询列表
    search() {
      this.getUserList()
    },
    reset() {
      this.searchParm.name = ''
    },
    //左侧树节点点击事件
    treeClick(data) {
      console.log(data)
      this.parms.deptId = data.id
      this.getUserList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
